<!--
 * @Description: 提醒记录
 * @Autor: 何兴家
 * @Date: 2020-12-02 13:18:05
 * @LastEditors: 何兴家
 * @LastEditTime: 2020-12-02 14:52:01
-->
<template>
  <div>
    <FormPanel ref="formPanel" :list="formList" :isSubmitBtn="false" :cols="2"></FormPanel>
    <FilterTable
      ref="table"
      columnsRef="repair_repairReception_precontractStatus_remindRecord"
      height="auto"
      :columns="columns"
      :dataSource="tableDataSource"
      :isSelectColumn="false"
      :onSyncTableData="handleSyncTableData"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAddBtnClick">新增</el-button>
      </template>
    </FilterTable>
    <div class="btnWrap">
      <AjaxButton type="primary" :disabled="addBtnDisabled" :click="handleComfirm">确定</AjaxButton>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction, jsonToHump } from '@/utils';
import { getUser, getUserId } from '@/assets/js/auth';

import { queryPrecontractOrderPrompt, savePrecontractOrderPrompt, deletePrecontractOrderPrompt } from '@/api/repair/repairReception/precontractStatus';

export default {
  props: ['bookingOrderDetail'],
  mixins: [dictionary],
  data() {
    return {
      formList: this.createFormList(),
      columns: this.createTableColumns(),
      tableDataSource: [], // table数据源
      syncTableData: [], // 同步的table数据
      addBtnDisabled: false // 新增按钮禁用状态
    };
  },
  mounted() {
    this.initFormData();
    this.queryTableData();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName',
          disabled: true
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 80,
          sorter: true,
          render: props => {
            return (
              <el-button
                size="mini"
                type="text"
                onClick={() => {
                  this.handleDeleteRow(props.row);
                }}
              >
                删除
              </el-button>
            );
          }
        },
        {
          title: '提醒人',
          dataIndex: 'reminder',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '提醒时间',
          dataIndex: 'remindDate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: true,
          defaultEditable: true,
          editType: 'input'
        }
      ];
    },
    // 同步table数据
    handleSyncTableData(list) {
      this.$nextTick(() => {
        let disabledRemarkList = list.filter(item => item.itemId);
        this.$refs.table.SET_CELL_DISABLED(disabledRemarkList, 'remark', true);
      });
      this.syncTableData = list;
    },
    // 初始化表单数据
    initFormData() {
      this.formList.find(item => item.fieldName === 'vin').initialValue = this.bookingOrderDetail.vin;
      this.formList.find(item => item.fieldName === 'ownerName').initialValue = this.bookingOrderDetail.ownerName;
    },
    // 查询提醒记录列表
    async queryTableData() {
      this.$refs.table.START_LOADING();
      this.addBtnDisabled = true;
      try {
        let res = await queryPrecontractOrderPrompt({
          bookingOrderNo: this.bookingOrderDetail.bookingOrderNo
        });
        if (res.resultCode == 200) {
          jsonToHump(res.data);
          this.tableDataSource = res.data;
        }
      } catch (err) {
        console.log(err, '获取提醒记录列表失败');
      } finally {
        this.$refs.table.STOP_LOADING();
        this.addBtnDisabled = false;
      }
    },
    // 点击新增
    handleAddBtnClick() {
      this.$refs.table.EXECUTE_INSERT({
        bookingOrderNo: this.bookingOrderDetail.bookingOrderNo,
        reminder: getUser(),
        remindDate: moment().format('YYYY-MM-DD HH:mm:ss'),
        remark: ''
      });
    },
    // 点击删除
    async handleDeleteRow(row) {
      try {
        let confirmRes = await confirmAction('是否确认删除此项', 'warning');
        if (row.itemId) {
          let res = await deletePrecontractOrderPrompt({ itemId: row.itemId, bookingOrderNo: row.bookingOrderNo });
        }
        this.$refs.table.EXECUTE_DELETE([row]);
        notifyAction('删除成功', 'success');
      } catch (err) {
        console.log(err);
      }
    },
    // 点击确定
    async handleComfirm() {
      if (this.syncTableData.length) {
        let res = await savePrecontractOrderPrompt(this.syncTableData);
        if (res.resultCode == 200) {
          notifyAction('保存成功', 'success');
          this.queryTableData();
        }
      }
    },
    // 点击取消
    handleCancel() {
      this.closePanel();
    },
    // 关闭页面
    closePanel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
